<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 第二步：创建被vue控制的视图 -->
    <!-- 在这里就是MVVM中的View视图 -->
    <div id="app">
        <!-- 文本差值表达式{{ }} -->
        {{message}}
    </div>

</body>

</html>
<!-- 第一步：引入vue3的包 -->
<script src="js/vue3.4.21.js"></script>
<!-- 第三部：编写vue的基本代码结构 -->
<script>
    //使用ES6的结构赋值去除vue包中的createApp.ref的方法
    const {
        createApp,
        ref
    } = Vue

    //创建一个Vue的应用实例
    //在这里就是MVVM中的ViewModel
    createApp({
            //在vue初始化完成后执行的一份方法（生命周期）
            setup() {
                //ref是vue定义响应式数据的一个方法
                //在这里就是MVVM中的Model
                const message = ref('Hello Vue')

                //切记：在setup中定义的数据和函数方法必须在return中进行返回
                return {
                    message
                }
            }
        }).mount('#app') //绑定id为app的视图模板

    //回顾js完成数据绑定如何实现
    //1  获取被渲染元素的dom节点
    //2  定义一个变量数据
    //3  运用获取dom节点的innerText属性进行赋值
    //4  如果数据发生改变还需要重新进行获取dom元素进行赋值
</script>